<template>
	<view class="item-box" >
		<view class="tit-txt">{{titleTxt}}</view>
		<view class="i-info" :class="title ? '' : 'no-title'">
			<view class="tit" v-if="title">{{title}}</view>
			<view class="s-txt">
				<input class="input-num" v-model="inputValue" @blur="onBlur" :placeholder="placeholder" @focus="onFocus" type="number" />
			</view>
			<view class="u-txt" v-if="minUnil">
				<view class="u-t">{{minUnil}}</view>
			</view>
			<view class="u-txt u-t-b" v-if="showQ"> +消费券 </view>
			<view class="s-txt" v-if="showQ">
				<input class="input-num" v-model="inputCoup" @blur="onCoupBlur" @focus="onCoupFocus"  :placeholder="placeholderQ" type="number" />
			</view>
		</view>
	</view>
</template>

<script>
	export default
	{
		props:["id","titleTxt","title","placeholder","covernum","name_rel","minUnil",'showQ','coupons'],
		data()
		{
			return{
				inputValue: this.covernum? this.covernum:'',
				inputCoup: this.coupons? this.coupons:'',
				placeholderQ: "请输入",
				oldValue: "",
			}
		},
		
		watch:{
			covernum:{
				handler(newValue,oldValue)
				{
					this.inputValue = newValue;
				}
			},
			coupons:{
				handler(newValue,oldValue)
				{
					this.inputCoup = newValue;
				}
			}
		},
		
		methods:
		{
			onBlur(event)
			{
				this.$nextTick(()=>{
					let obj = {};
					obj.id = this.id;
					obj.num = this.inputValue;
					obj.type = 1; //价格或者是划线价
					this.$emit("changInputTxt",obj);
				})
			},
			
			onCoupBlur()
			{
				this.$nextTick(()=>{
					let obj = {};
					obj.id = this.id;
					obj.num = this.inputCoup;
					obj.type = 2; //优惠券
					this.$emit("changInputTxt",obj);
				})
			},

			onFocus()
			{
				let obj = {};
				obj.id = this.id;
				obj.type = 1; //价格或者是划线价
				this.$emit("onFouces",obj);
			},

			onCoupFocus()
			{
				let obj = {};
				obj.id = this.id;
				obj.type = 2; //优惠券
				this.$emit("onFouces",obj);
			},

			updateInputTxt(data)
			{
				if(data.num)
					this.inputValue = data.num;
				if(data.coupon)
					this.inputCoup = data.coupon;
			},
			
			setSpaceStr()
			{
				this.inputValue = "";
				this.inputCoup = "";
			}
		},
	}
</script>

<style lang="scss">
	.item-box
	{
		font-size: 13px;
		color: #333;
		.i-info
		{
			display:flex;
			color: #333;
			position: relative;
			width: 350px;
			.tit
			{
				background-color: #eee;
				padding: 10upx;
				width: 120px;
				text-align: center;
			}
			.s-txt
			{
				width: 200px;
				padding: 10upx;
				border: 1px solid #ECECEC;
				
				padding-left: 10px;
				.input-num
				{
					width: 100%;
					height: 100%;
				}
			}
			.u-txt
			{
				display: flex;
				padding: 10upx;
				text-align: center;
				background-color: #eee;
				width: 120px;
				.u-t
				{
					width: 100%;
					text-align: center;
				}
			}
			.u-t-b
			{
				border-left: 1px solid #ECECEC;
				width: 150px;
				text-align: center;
			}
		}
		
	    .no-title
		{
			width: 250px;
		}
	
	}
</style>
